<template>
  <el-card  style="border: 0;">
    <div class="building-header">
      <el-button type="primary" icon="Plus" size="small" @click="handleAdd">
        新增楼栋
      </el-button>
    </div>

    <!-- 筛选区 -->
    <el-form :inline="true" :model="filterForm" class="filter-form" style="margin-bottom: 15px;">
      <el-form-item label="当前园区">
        <el-input :value="parkName" disabled />
      </el-form-item>
      <el-form-item label="楼栋名称">
        <el-input v-model="filterForm.name" @input="val => filterForm.name = val" placeholder="请输入楼栋名称" clearable />
      </el-form-item>
      <el-form-item label="楼栋类型">
        <el-select v-model="filterForm.type" @change="val => filterForm.type = val" placeholder="请选择类型" clearable
          style="width: 150px;">
          <el-option label="办公楼" value="office" />
          <el-option label="宿舍楼" value="dormitory" />
          <el-option label="商业楼" value="commercial" />
          <el-option label="其他" value="other" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleFilter">查询</el-button>
        <el-button @click="resetFilter">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="buildingList" :border="true" style="width: 100%">
      <!-- <el-table-column prop="id" label="ID" width="80" /> -->
      <el-table-column prop="name" label="楼栋名称" :align="center" />
      <el-table-column prop="parkName" label="所属园区" :align="center" />
      <el-table-column prop="type" label="楼栋类型" :align="center">
        <template #default="scope">
          <el-tag :type="scope.row.type === 'office' ? 'primary' :
            scope.row.type === 'dormitory' ? 'success' :
              scope.row.type === 'commercial' ? 'warning' : 'info'
            ">
            {{
              scope.row.type === 'office' ? '办公楼' :
                scope.row.type === 'dormitory' ? '宿舍楼' :
                  scope.row.type === 'commercial' ? '商业楼' : '其他'
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="floors" label="楼层数" :align="center" width="150" />
      <el-table-column prop="description" label="楼栋描述" :align="center" show-overflow-tooltip />
      <el-table-column prop="createTime" label="创建时间" :align="center" />
      <el-table-column label="操作" width="220" :align="center">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
            删除
          </el-button>
          <el-button size="small" type="primary" @click="handleViewRooms(scope.row)">
            查看房间
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalBuildings" />
    </div>
  </el-card>
</template>

<script setup>
import { ref, watch, inject } from 'vue';
import { ElMessage, ElMessageBox,ElLoading } from 'element-plus';
import request from '@/api/request';

const center = 'center'

// 接收props
const props = defineProps({
  parkId: {
    type: Number,
    required: true
  },
  parkName: {
    type: String,
    required: true
  }
});

// 状态管理
const currentPage = ref(1);
const pageSize = ref(10);
const totalBuildings = ref(0);
const buildingList = ref([]);
const filterForm = ref({
  name: '',
  type: ''
});

// 注入数据和方法
const buildingData = inject('buildingData');
const fetchBuildingList = inject('fetchBuildingList');
const openBuildingForm = inject('openBuildingForm');
const emit = defineEmits(['view-rooms']);

// 监听参数变化，重新加载数据
watch([() => props.parkId, currentPage, pageSize, () => filterForm.value], loadBuildingList, { immediate: true });

// 加载楼栋列表
function loadBuildingList() {
  fetchBuildingList(props.parkId, filterForm.value, currentPage.value, pageSize.value).then(data => {
    // 应用筛选
    data.list.forEach(item => {
      item.parkName = props.parkName;
    });

    buildingList.value = data.list;
    totalBuildings.value = data.total;
  }).catch(err => {
    console.log("查询失败err" + err)
  });
}

// 处理新增
const handleAdd = () => {
  openBuildingForm({
    parkId: props.parkId,
    parkName: props.parkName
  });
};

// 处理编辑
const handleEdit = (row) => {
  openBuildingForm(row);
};

// 处理删除
const handleDelete = (id) => {
  const loading = ElLoading.service({
    lock: true,
    text: '正在删除...',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  ElMessageBox.confirm('确认删除当前楼栋信息吗?')
    .then(() => {
      request.get('/park-building/remove/' + id).then(data => {
        if (data.success) {
          loadBuildingList();
          ElMessage.success('删除成功');
        } else {
          ElMessage.error(data.message);
        }
        loading.close()
      }).catch(err => {
        loading.close()
        ElMessage.error('删除异常' + err);
      })
    })
    .catch(() => {
      // catch error
       loading.close()
    })

};

// 查看房间
const handleViewRooms = (row) => {
  emit('view-rooms', row);
};

// 处理筛选
const handleFilter = () => {
  currentPage.value = 1;
  loadBuildingList();
};

// 重置筛选
const resetFilter = () => {
  filterForm.value = {
    name: '',
    type: ''
  };
  currentPage.value = 1;
  loadBuildingList();
};

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};


defineExpose({ loadBuildingList }); // 暴露刷新方法给上层

</script>

<style scoped>
.building-header {
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-start;
}

.filter-form {
  margin-bottom: 15px;
  text-align: left;
}

.pagination {
  margin-top: 15px;
  text-align: right;
}
</style>
